import React, { useEffect, useState } from 'react';
import './index.css';
import { Image, Input, message, Pagination, Spin } from "antd";
import tb from './image/tb.svg'
import { useLocation, useNavigate } from "react-router-dom";
import http from "../../../util/http";
import Html from '../Html';
import top from './image/top.jpg'

const { Search } = Input;

function ListTable(props) {
    const location = useLocation();
    let navigate = useNavigate();
    const state = location.state || {}
    const params = state.params || {}
    const dirId = params.dirId || -1;
    const docId = params.docId || null;
    const [data, setData] = useState([
        {
            id: 1,
            docSubject: "加载中。。。",
            docCreateDate: "2022-12-12",
        }
    ]);
    //正式
    const docIdMap = {
        '#/portal/planning': 363843,
        '#/portal/strategy': 363844,
        '#/portal/review': 363846,
        '#/portal/services': 363847,
        '#/portal/research': 363849,
    };
    //测试
    // const docIdMap = {
    //     '#/portal/planning': 363227,
    //     '#/portal/strategy': 363228,
    //     '#/portal/review': 363229,
    //     '#/portal/services': 363230,
    //     '#/portal/research': 363231,
    // };
    const currentHash = window.location.hash;
    const currentDocId = docIdMap[currentHash] || docId;


    const [page, setPage] = useState({
        pageNum: 1,
        pageSize: 10
    });
    const [loading, setLoading] = useState(false);
    const [total, setTotal] = useState(0);
    const [search, setSearch] = useState("")

    const [showTopImg, setShowTopImg] = useState(false)
    useEffect(() => {
        if (dirId !== -1) {
            setLoading(true)
            http.doPost('/doc/getdoc', {
                category: dirId,
                pageSize: page.pageSize,
                pageNum: page.pageNum,
                search: search,
                selectYears: state.selectYears,
            }).then(res => {
                if (res.status === 200) {
                    setData(res.data.list)
                    setTotal(res.data.totalCount)
                }
                setLoading(false)
            }).catch(reason => {
                message.error(reason.message)
                setLoading(false)
            })
        }
    }, [page, dirId, search]);

    useEffect(() => {
        const showHashes = [
            '#/portal/planning',
            '#/portal/strategy',
            '#/portal/review',
            '#/portal/services',
            '#/portal/research'
        ];
        setShowTopImg(showHashes.includes(currentHash));
    }, [currentHash]);

    const onChange = (current, pageSize) => {
        setPage({
            pageNum: current,
            pageSize: pageSize
        })
    };

    // pageSize 改变时重置到第一页
    const onShowSizeChange = (current, size) => {
        setPage({
            pageNum: 1,
            pageSize: size
        })
    };

    function openUrl(docId) {
        debugger
        if (docId && docId !== "") {
            navigate('/portal/details?hiddenLeft=1', {
                state: { docId, page: state.page, text: state.text, params: params }
            });
        }
    }

    const onSearch = (value) => {
        if (!loading) {
            setSearch(value)
        }
    }

    return (
        <div className="portal-list-main">
            <div className="portal-list-main-content">
                <div style={{ marginBottom: 20, display: 'flex', justifyContent: 'flex-end' }}>
                    <Search
                        placeholder="请输入查询内容"
                        allowClear
                        enterButton="查询"
                        size="large"
                        onSearch={onSearch}
                        disabled={loading}
                        style={{ width: 304 }}
                    />
                </div>

                {/* ✅ 修改：顶部文档渲染，使用 currentDocId */}
                {showTopImg && (
                    <div className="portal-list-main-doc">
                        <Html params={{ docId: currentDocId }} />
                        {/* <Image width={800} height={400} src={top}/> */}
                    </div>
                )}

                <div style={{ clear: "both" }} />
                <Spin spinning={loading}>
                    <div className="portal-list-table">
                        {
                            data && data.map((item, index) => {
                                return (
                                    <div className="portal-list-table-one" key={item.id} onClick={() => openUrl(item.id)}>
                                        <div className="portal-list-table-one-icon">
                                            <div className="circle-bullet-list-table blue-dark"></div>
                                        </div>
                                        <div className="portal-list-table-one-title">{item.docSubject}</div>
                                        <div className="portal-list-table-one-time">{item.docCreateDate}</div>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="portal-list-pagination">
                        <Pagination
                            showSizeChanger
                            showQuickJumper
                            showTotal={(total) => `共${total}条`}
                            current={page.pageNum}
                            pageSize={page.pageSize}
                            total={total}
                            hideOnSinglePage={true}
                            onChange={onChange}
                            onShowSizeChange={onShowSizeChange}
                        />
                    </div>
                </Spin>

            </div>


        </div>
    );
}

export default ListTable;